<template>
  <div>
    <!--系统图列表区-->
  <SysView v-show="!ifEditStatus" :edit="ifEditStatus" @tell-edit="tellEdit" ref="listPanel"></SysView>
    <!--系统图编辑区-->
  <div class="mainBgg" v-show="ifEditStatus">
    <div style="flex: 10;">
      <div class="editPanel">
      <Row>
        <ButtonGroup>
          <Button type="success" icon="md-return-left" @click="changePanel">返回列表</Button>
          <Button type="success" icon="ios-color-wand-outline" @click="emptyPanel" :disabled="curObj.id !== undefined">清空编辑数据
          </Button>
        </ButtonGroup>
        <RadioGroup v-model="model" type="button" @on-change="radioChage">
          <Radio label="移动"></Radio>
          <Radio label="只读"></Radio>
          <Radio label="直线"></Radio>
          <Radio label="折线"></Radio>
          <Radio label="多边形"></Radio>
          <Radio label="连线"></Radio>
          <Radio label="删除"></Radio>
        </RadioGroup>
        <ButtonGroup>
          <!--<Button type="primary" icon="ios-crop" @click="exportImage">导出图片</Button>-->
          <!--<Button type="primary" icon="ios-color-filter-outline" @click="exportJsons">导出json数据</Button>-->
          <Button type="primary" icon="ios-color-filter-outline" @click="switches.jsonModal = true" :disabled="curObj.id !== undefined">导入布局数据</Button>
          <Button type="primary" icon="ios-color-filter-outline" @click="xAline">横对齐</Button>
          <Button type="primary" icon="ios-color-filter-outline" @click="yAline">竖对齐</Button>
          <Button type="warning" icon="md-close" :loading="switches.delImgStatus" @click="delPic" :disabled="curObj.id ===
          undefined">删除系统图</Button>
        </ButtonGroup>

        <Col span="4" style="float: right;margin-right: 10px;display: inline-flex;">
          <Input placeholder="系统图名称..." v-model="curObj.sysName"/>
          <Button type="primary" icon="md-checkmark" :loading="switches.savingImgStatus" @click="saveData"
                  style="margin-left: 10px;">{{this.curObj.id ? '保存编辑': '保存新增' }}</Button>
        </Col>
        <Col span="4" style="float: right;margin-right: 10px;display: inline-flex;">
          <div class="ddz21">
            <div class="ddx08">关联工厂:</div>
            <div class="ddz3">
              <Select v-model="curObj.spaceId" @on-change="relationChange">
                <Option v-for="item in spaceList2" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </div>
          </div>
        </Col>
      </Row>
      <div style="position: relative;margin-top: 5px;">
        <div class="cann" id="canvas"/>
      </div>
      <Modal v-model="setttingModalLine" title="设置连线样式" class-name="vertical-center-modal"
             :closable="false" :mask="true" @on-ok="okLine" @on-cancel="cancel" @on-visible-change="modalVisible">
        <Form :model="tempSetting" :label-width="80">
          <FormItem label="线条标签">
            <Input v-model="tempSetting.label" placeholder="线条标签"></Input>
          </FormItem>
          <FormItem label="线条宽度">
            <InputNumber :max="20" :min="1" v-model="tempSetting.width"></InputNumber>
          </FormItem>
          <FormItem label="线条颜色">
            <!--<Input v-model="tempSetting.color" placeholder="颜色代码"></Input>-->
            <ColorPicker v-model="tempSetting.color" recommend/>
          </FormItem>
          <FormItem label="线条箭头">
            <RadioGroup v-model="tempSetting.ifNarrow">
              <Radio label="显示">显示</Radio>
              <Radio label="不显示">不显示</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="线条虚实">
            <RadioGroup v-model="tempSetting.idDash">
              <Radio label="实线">实线</Radio>
              <Radio label="虚线">虚线</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="线条类型">
            <Select v-model="tempSetting.lineType">
              <Option value="Q.Consts.EDGE_TYPE_VERTICAL_HORIZONTAL">单直角</Option>
              <Option value="Q.Consts.EDGE_TYPE_ORTHOGONAL_HORIZONTAL">双直角</Option>
              <Option value="Q.Consts.EDGE_TYPE_EXTEND_TOP">长短双直角（顶部）</Option>
              <Option value="Q.Consts.EDGE_TYPE_EXTEND_BOTTOM">长短双直角（底部）</Option>
              <Option value="Q.Consts.EDGE_TYPE_EXTEND_LEFT">长短双直角（左部）</Option>
              <Option value="Q.Consts.EDGE_TYPE_EXTEND_RIGHT">长短双直角（右部）</Option>
              <Option value="Q.Consts.EDGE_TYPE_ELBOW_HORIZONTAL">双160°角</Option>
              <Option value="Q.Consts.EDGE_TYPE_ZIGZAG">中间折线</Option>
            </Select>
          </FormItem>
        </Form>
      </Modal>
      <Modal v-model="setttingModalNode" title="设置图元样式" class-name="vertical-center-modal"
             :closable="false" :mask="true" @on-ok="okNode" @on-cancel="cancel" @on-visible-change="modalVisible">
        <Form :model="tempSetting" :label-width="80">
          <FormItem label="图元名称">
            <Input v-model="tempSetting.label" placeholder="图元名称" :disabled="true"></Input>
          </FormItem>
          <FormItem label="图元大小">
            <InputNumber :max="80" :min="40" v-model="tempSetting.size"></InputNumber>
          </FormItem>
        </Form>
      </Modal>
        <Modal :closable="false" :mask="true" @on-visible-change="modalVisible"
          v-model="switches.jsonModal "
          title="导入json数据"
          @on-ok="importJsons"
          @on-cancel="cancel">
          <textarea rows="15" v-model="doneJson" style="width: 100%;" placeholder="请输入有效的布局json数据..."></textarea>
        </Modal>
      </div>
    </div>
  <div style="flex: 2;">
    <Row class="fatherToolBar" :gutter="10">
      <Col span="24">
        <div class="ddz2">
          <div class="ddx8">空间: </div>
          <div class="ddz3">
            <Cascader :data="spaceList" change-on-select @on-change="selectChange" v-model="factName"
                      :clearable="false" :disabled="curObj.spaceId===''"></Cascader>
          </div>
        </div>
      </Col>
    </Row>
    <Row class="devBB" :gutter="5">
      <Col span="7" v-for="(dd, index) in devs" :key="dd.id" @dblclick.native="addToPool(index)" class="devBg"
           v-show="dd.ifShow">
        <DevCard :dev="dd"></DevCard>
      </Col>
        <Spin size="large" fix v-if="switches.loadDevStatus"></Spin>
    </Row>
  </div>
  </div>
  </div>
</template>
<script>
  import SysView from './SysView'
  import DevCard from './DevCard'
  export default {
    name: 'SysPic',
    components: {SysView, DevCard},
    mounted: function () {
      this.getSpaceList()
      this.generateBg()
    },
    data () {
      return {
        graph: null,
        ifEditStatus: false,
        doneJson: '', // 导入json数据
        model: '移动', // 默认的 系统图 编辑 模式
        factName: [], // 设备刷选 空间选择存储
        spaceList: [],
        devs: [],
        inPool: [], // 保存已经关联在 系统图中的 数据 id 或 obj
        outPool: [], // 保存未关联在 系统图中的 数据 id 或 obj
        picPool: [], // 已经在或 添加在系统图中的  数据 id 或 obj
        switches: {
          loadDevStatus: false, // 加载设备状态
          delImgStatus: false, // 删除系统图状态
          savingImgStatus: false, // 保存系统图 状态
          jsonModal: false //  导入json数据的模态框
        },
        spaceList2: [],
        tempSetting: {
          color: '#333333'
        }, // 临时存储 编辑节点的 设置项
        edittingNode: null, // 当前编辑的节点 或者 线条
        curObj: {},
        setttingModalLine: false,
        setttingModalNode: false,
        events: {
          oncontextmenu: (evt, graph) => {
            Q.log(evt)
          },
          ondblclick: (evt, graph) => {
            if (!evt.getData()) {
              return
            }
              let dd = evt.getData()
              this.edittingNode = dd
              this.tempSetting.label = dd.name
            if (evt.getData() instanceof Q.Node) {
              this.setttingModalNode = true
            }
            if (evt.getData() instanceof Q.Edge) {
              this.setttingModalLine = true
            }
          }
        }
      }
    },
    methods: {
      getSpaceList: function () {
        this.spaceList2 = this.$store.state.spaces[0].children
        this.spaceList = this.$store.state.spaces
      },
      generateBg: function () {
        // 简单生成画板1
        this.graph = new Q.Graph('canvas')
        // 禁止双击 放大
        this.graph.enableDoubleClickToOverview = false
        // 默认的 样式
        this.graph.styles={}
        this.graph.styles[Q.Styles.EDGE_WIDTH] = 4
        // console.log('getStyle', this.graph.styles())
        // 添加 一些事件
        this.graph.addCustomInteraction(this.events)
        // 自定义一种 删除的交互模式
        Q.Consts.INTERACTION_MODE_DELETE_NODE = 'interaction.mode.delete'
        Q.Defaults.registerInteractions(Q.Consts.INTERACTION_MODE_DELETE_NODE,
          [Q.PanInteraction, Q.WheelZoomInteraction, Q.SelectionInteraction, {
            onclick: (evt, graph) => {
              this.reWriteRemoveSelectionByInteraction(evt)
            }
          }])
      },
      emptyPanel: function () {
        // 清空屏幕
        this.graph.clear()
        // 清空选择的数据
        this.curObj.dids = []
        // 显示数据
        if (this.devs.length !== 0) {
          this.devs.forEach(item => {item.ifShow = true})
        }
      },
      radioChage: function (resp) {
        switch (resp) {
          case '移动':
            this.graph.interactionMode = Q.Consts.INTERACTION_MODE_DEFAULT
            break
          case '只读':
            this.graph.interactionMode = Q.Consts.INTERACTION_MODE_VIEW
            console.log('this.graph.interactionProperties', this.graph.interactionProperties)
            break
          case '直线':
            this.graph.interactionMode = Q.Consts.INTERACTION_MODE_CREATE_SIMPLE_EDGE
            break
          case '折线':
            this.graph.interactionMode = Q.Consts.INTERACTION_MODE_CREATE_EDGE
            break
          case '连线':
            this.graph.interactionMode = Q.Consts.INTERACTION_MODE_CREATE_LINE
            break
          case '多边形':
            this.graph.interactionMode = Q.Consts.INTERACTION_MODE_CREATE_SHAPE
            break
          case '删除':
            this.graph.interactionMode = Q.Consts.INTERACTION_MODE_DELETE_NODE
            break
          default:
            this.graph.interactionMode = Q.Consts.INTERACTION_MODE_DEFAULT
            break
        }
      },
      addNode: function (item) {
        // 添加节点方法
        let node = new Q.Node()
        // 名称
        node.name = item.iotDevType.useType + '(' + item.name + ')'
        // 设置 用户属性，把 设备的id 放进去
        node.set('did', item.id)
        // 随机位置
        node.x = Math.floor(Math.random() * (300) + 50)
        node.y = Math.floor(Math.random() * (300) + 50)
        // 添加进去
        this.graph.graphModel.add(node)
      },
      addNodeDataHanlder: function (item) {
        //  1.增加 数据处理--- 设备id 放进 系统图对象的 dids 属性中
        this.curObj.dids.push(item.id)
        // 2. 设备选择池 隐藏掉 已经放进去的 设备 ifShow: ---> 已在 上一步 调用 执行隐藏
      },
      removeNodeDataHanlder: function (item) {
        // 1. 删除 dids 中 对应的 设备id
        this.curObj.dids.splice(this.curObj.dids.findIndex(cc => cc === item.id), 1)
        // 2. 设备选择池 显示 该设备 ifShow
        let targetDevIndex = this.devs.findIndex(dev => dev.id === item.id)
        if (targetDevIndex !== -1) {
          this.devs[targetDevIndex].ifShow = true
        }
      },
      initCurObj: function () {
        this.curObj = {
          dids: [],
          devIds: '',
          sysName: '',
          spaceId: '',
          layoutData: ''
        }
      },
      makeLayoutByJson: function () {
        // todo generate view by code
      },
      addToPool: function (index) {
        this.devs[index].ifShow = false
        // 添加到 系统图 中，调用 添加方法
        this.addNode(this.devs[index])
        // 处理 数据
        this.addNodeDataHanlder(this.devs[index])
      },
      handlerDevDatas: function () {
        // 处理 数据，和 已经在系统图中 数据的 交集关系
        if (this.curObj === null) {
          // 新增的
          if (this.devs.length > 0) {
            this.outPool = this.devs.map(single => single.id)
          }
        }
      },
      selectChange: function (value, selectedData) {
        this.curObj.sysName = ''
        let target = selectedData[selectedData.length - 1]
        // 加载对应的 设备数据
        this.loadDevs(target.value)
      },
      loadDevs: function (spaceId) {
        // 加载 设备数据
        this.switches.loadDevStatus = true
        window.myapi.space_under_devs({'spaceId': spaceId}).then(resp => {
          if (resp.status === 200 && resp.data.status === 200) {
            console.log('加载的设备数据是：', resp.data)
            this.filterDevDatas(resp.data.data)
          }
        }).catch(infos => {
          this.$Notice.warning({
            title: infos
          })
        }).finally(() => {
          this.switches.loadDevStatus = false
          this.handlerDevDatas()
        })
      },
      filterDevDatas: function (newDatas) {
        // 根据与现有 的已经关联到 系统图的设备 对比
        if (this.curObj.dids.length > 0) {
          // 编辑
          this.devs = newDatas.map(item => {
            let num = this.curObj.dids.findIndex(id => id === item.id)
            if (num === -1) {
              item.ifShow = true
            } else {
              item.ifShow = false
            }
            return item
          })
        } else {
          // 新增
          this.devs = newDatas.map(item => {
            item.ifShow = true
            return item
          })
        }
      },
      relationChange: function (id) {
        if (id) {
        // 其他工厂的数据 禁止选择
        for (let i = 0; i < this.spaceList[0].children.length; i++) {
          let cur = this.spaceList[0].children[i]
          if (cur.value === id) {
            cur.disabled = false
          } else {
            cur.disabled = true
          }
        }
          // 级联设备 选择 【总部-工厂】
          this.factName = [this.spaceList[0].value, id]
          this.loadDevs(id)
        }
      },
      exportImage: function () {
        let viewport = this.graph.viewportBounds
        let clip = new Q.Rect(viewport.cx, viewport.cy)
        // 控制 画图的大小，，5 位置越小，图范围越小，反之
        let scall = this.graph.scale / 3
        clip.grow(150 / scall, 350 / scall)
        let imageInfo = this.graph.exportImage(this.graph.scale, clip)
        if (!imageInfo || !imageInfo.data) {
          return false
        }
        let win = window.open()
        let doc = win.document
        doc.title = 'export image - ' + imageInfo.width + ' x ' + imageInfo.height
        let img = doc.createElement('img')
        img.src = imageInfo.data
        doc.body.appendChild(img)
      },
      exportJsons: function () {
        let win = window.open()
        let doc = win.document
        let content = doc.createElement('p')
        content.innerHTML = this.graph.toJSON(true)
        doc.body.appendChild(content)
      },
      importJsons: function () {
        // 导入json数据
        if (!this.doneJson) {
          this.$Message.warning('请输入有效内容.....')
          return
        }
        // 清空布局
        this.graph.clear()
        this.graph.parseJSON(this.doneJson)
        setTimeout(() => { this.doneJson = '' }, 200)
      },
      reWriteRemoveSelectionByInteraction: function (evt) {
        // 重写 RemoveSelectionByInteraction 方法，，变为 中文的提示语！
        let selections = this.graph.selectionModel.datas
        // 获取 设备di  已放在 properties.did 中
        if (!selections || selections.length === 0) {
          return false
        }
        Q.confirm('确认删除元素么？ ', () => {
          let selection = this.graph.removeSelection()
          if (selection) {
            // 如果是删除 节点的话，就执行执行 设备池 显示 该设备
            if (selection[0] instanceof Q.Node) {
              this.removeNodeDataHanlder({id: selection[0].properties.did})
            }
            let event = new Q.InteractionEvent(this, Q.InteractionEvent.ELEMENT_REMOVED, evt, selection)
            this.graph.onInteractionEvent(event)
          }
        }, this)
      },
      saveData: function () {
        // 保存系统图
        if (!this.curObj.sysName || this.curObj.dids.length === 0 || !this.curObj.spaceId) {
          this.$Message.info('未完成编辑必要的操作：系统图名称，关联空间，部署设备！')
        } else {
          let viewport = this.graph.viewportBounds
          let clip = new Q.Rect(viewport.cx, viewport.cy)
          // 控制 画图的大小，，5 位置越小，图范围越小，反之
          let scall = this.graph.scale / 3
          clip.grow(150 / scall, 350 / scall)
          let imageInfo = this.graph.exportImage(this.graph.scale, clip)
          let formData = new FormData()
          formData.append('img', this.convertBase64UrlToBlob(imageInfo.data))
          this.curObj.devIds = this.curObj.dids.toString()
          this.curObj.layoutData = this.graph.toJSON(true)
          formData.append('sysImg', JSON.stringify(this.curObj))
          this.switches.savingImgStatus = true
          window.myapi.upload('/sysimg/newPic/', formData).then(resp => {
            // this.uploading = false
            if (resp.status === 200 && resp.data.status === 200) {
              this.$Notice.success({
                title: '操作提示',
                desc: '保存成功！返回列表界面 '
              })
            }
          }).catch(info => {
            this.$Notice.warning({
              title: '操作提示',
              desc: info
            })
          }).finally(() => {
            this.switches.savingImgStatus = false
            this.changePanel()
          })
        }
      },
      convertBase64UrlToBlob: function (urlData) {
        let bytes = window.atob(urlData.split(',')[1])
        // 去掉url的头，并转换为byte

        // 处理异常,将ascii码小于0的转换为大于0
        let ab = new ArrayBuffer(bytes.length)
        let ia = new Uint8Array(ab)
        for (let i = 0; i < bytes.length; i++) {
          ia[i] = bytes.charCodeAt(i)
        }

        let blod = new Blob([ab], {type: 'image/png'})
        blod.name = 'sdfaf.png'
        return blod
      },
      maketempSettingDefault: function () {
        this.tempSetting = {
          color: this.tempSetting.color
        }
      },
      okNode: function () {
        this.edittingNode.size = {width: this.tempSetting.size}
        this.maketempSettingDefault()
      },
      okLine: function () {
        this.edittingNode.setStyle(Q.Styles.EDGE_WIDTH, this.tempSetting.width)
        if (this.tempSetting.color !== '') {
        this.edittingNode.setStyle(Q.Styles.EDGE_COLOR, this.tempSetting.color)
        }
        this.edittingNode.name = this.tempSetting.label
        if (this.tempSetting.ifNarrow === '不显示') {
          this.edittingNode.setStyle(Q.Styles.ARROW_TO, null)
        } else {
          this.edittingNode.setStyle(Q.Styles.ARROW_TO, true)
        }
        if (this.tempSetting.idDash === '虚线') {
          this.edittingNode.setStyle(Q.Styles.EDGE_LINE_DASH, [8, 4, 0.01, 4])
        } else {
          this.edittingNode.setStyle(Q.Styles.EDGE_LINE_DASH, null)
        }
        if (this.tempSetting.lineType !== null) {
          this.edittingNode.edgeType = eval(this.tempSetting.lineType)
        } else {
          this.edittingNode.edgeType = Q.Consts.EDGE_TYPE_DEFAULT
        }
        this.edittingNode = null
        this.maketempSettingDefault()
      },
      xAline: function () {
        // 使其横对齐
        if (this.graph.selectionModel.length <= 1) {
          this.$Message.info('请至少选择两个图元再进行此操作!')
        } else {
          let standardOne = this.graph.selectionModel.datas[0]
          let standardtTwo = this.graph.selectionModel.datas[1]
          let gap = standardtTwo.x - standardOne.x
          for (let i = 0; i < this.graph.selectionModel.length; i++) {
            let curOne = this.graph.selectionModel.datas[i]
            curOne.y = standardOne.y
            if (i >= 2) {
              // 调节间隔
              let lastOne = this.graph.selectionModel.datas[i - 1]
              curOne.x = lastOne.x + gap
            }
          }
        }
      },
      yAline: function () {
        // 使其竖对齐
        if (this.graph.selectionModel.length <= 1) {
          this.$Message.info('请至少选择两个图元再进行此操作!')
        } else {
          let standardOne = this.graph.selectionModel.datas[0]
          let standardtTwo = this.graph.selectionModel.datas[1]
          let gap = standardtTwo.y - standardOne.y
          for (let i = 0; i < this.graph.selectionModel.length; i++) {
            let curOne = this.graph.selectionModel.datas[i]
            curOne.x = standardOne.x
            if (i >= 2) {
              // 调节间隔
              let lastOne = this.graph.selectionModel.datas[i - 1]
              curOne.y = lastOne.y + gap
            }
          }
        }
      },
      delPic: function () {
        // 删除系统图
        if (this.curObj.id) {
          let config = {
            title: '删除系统图',
            content: '您确定删除吗该系统图吗？',
            onOk: () => {
              this.switches.delImgStatus = true
              window.myapi.do_del('sysimg/del', [this.curObj.id]).then(resp => {
                if (resp.status === 200 && resp.data.status === 200) {
                this.$Notice.success({
                  title: '提示',
                  desc: '删除成功，返回选择列表!'
                })
                  this.changePanel()
                } else {
                this.$Notice.error({
                  title: '提示',
                  desc: resp.data.msg
                })
                }
              }).catch(reason => {
                this.$Notice.warning({
                  title: '提示',
                  desc: '删除出错，请检查.......'})
              }).finally(() => {
                this.switches.delImgStatus = false
              })
            }
          }
          this.$Modal.confirm(config)
        } else {
          this.$Message.info('系统图不存在，无需删除.......')
        }
      },
      cancel: function () {
      },
      modalVisible: function (resps) {
        if (!resps) {
          this.edittingNode = null
          this.maketempSettingDefault()
          this.doneJson = ''
        }
      },
      changePanel: function () {
        // 清空
        this.ifEditStatus = false
        this.graph.clear()
        // 调用 子组件 的刷新数据 方法
        this.$refs.listPanel.loadImgsData()
        // 清空 curObj对象
        this.curObj = {}
        this.devs = []
        this.factName = []
      },
      tellEdit: function (data) {
        // 跳转到 编辑 界面
        if (data === null) {
          this.initCurObj()
        } else {
          this.curObj = data
        }
        console.log('此时此刻的对象数据是：', this.curObj)
        // 编辑系统图
        this.graph.clear()
        // 显示编辑板块
        this.ifEditStatus = true
        // 恢复 编辑模式为 移动模式
        this.model = '移动'
        // 延迟加载  避免qunee 获取不到父级 的 长宽
        setTimeout(() => {
          if (data !== null) {
          // 把json 数据转为 视图的方法
            this.graph.parseJSON(data.layoutData)
            // 让 设备 根据对 对应的空间id 加载设备数据
            this.relationChange(data.spaceId)
          }
          // 刷新视图
          this.graph.updateViewport()
          // 移到中心显示
          this.graph.moveToCenter()
        }, 100)
      }
    }
  }

</script>
<style lang="less">
  .vertical-center-modal {
    justify-content: center;

    .ivu-modal {
      float: right;
      margin-right: 100px;
      margin-top: 50px;
    }
  }

  .fatherToolBar {
    margin-bottom: 10px;
    border-bottom: solid #e4e0e0 1px;
    padding-bottom: 5px;
  }
  .editPanel {
  }
  .selectPanel {
    height: 800px;
    /*border: 1px solid #ded9d9;*/
  }

  .cann{
    height: 800px;
    border: 1px solid #ded9d9;
    background: #EEE;
  }
  .ddz2 {
    display: flex;
  }
  .ddz21 {
    display: flex;
    width: 100%;
  }

  .ddz3 {
    flex: 1;
  }

  .ddx8 {
    flex: 0 0 50px;
    line-height: 32px;
    text-align: right;
    padding-right: 10px;
  }
  .ddx08 {
    flex: 0 0 80px;
    line-height: 32px;
    text-align: right;
    padding-right: 10px;
  }

  .ddx9 {
    flex: 0 0 50px;
    line-height: 32px;
    text-align: right;
    padding-right: 10px;
  }

  .devBg{
    border: solid 1px #e7e2e2;
    padding: 3px;
    /* background: #f9f9f9; */
    border-radius: 5px;
    margin: 3px;
  }

  .devBB{
    height: 90%;
    width: 100%;
    padding-left: 10px;
    overflow-y: scroll;
  }
  .mainBgg{
    display: flex;
    height: 845px;
  }
</style>
